<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>汉服文化数据大屏（模块化版）</title>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="hanfu-style.css">
    <!-- 引入ECharts核心 + 中国地图（必须先引核心，再引地图） -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <!-- 先引数据配置，再引图表逻辑 -->
    <script src="hanfu-data.js"></script>
    <script src="hanfu-chart.js"></script>
</head>
<body>
<div class="dashboard">
    <!-- 顶部标题 -->
    <header class="top-header">
        <div class="logo">汉服文化数据平台</div>
        <h1>汉服文化传播监控大屏</h1>
        <div class="time-filter">
            <span class="active" data-period="30">近30天</span>
            <span data-period="90">近90天</span>
            <span data-period="365">近1年</span>
        </div>
    </header>

    <!-- 核心数据 -->
    <div class="core-data">
        <div class="data-item">
            <p>累计参与人数</p>
            <p class="big-num" id="totalPeople">1,287,542</p>
            <p id="peopleGrowth">同比 ↑32.6%</p>
        </div>
        <div class="data-item">
            <p>文化活动场次</p>
            <p class="big-num" id="totalEvents">1,856</p>
            <p id="eventsGrowth">同比 ↑18.3%</p>
        </div>
        <div class="data-item">
            <p>传播覆盖人次</p>
            <p class="big-num" id="totalCoverage">25.6 亿</p>
            <p id="coverageGrowth">同比 ↑42.1%</p>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
        <aside class="left-panel">
            <div class="panel-card">
                <h3>汉服风格占比分布</h3>
                <div id="ring-chart" class="chart"></div>
                <div class="distribution-list">
                    <div class="distribution-item">
                        <span class="color-block style1"></span>
                        <span>明制 <span id="styleMing">38%</span></span>
                    </div>
                    <div class="distribution-item">
                        <span class="color-block style2"></span>
                        <span>唐制 <span id="styleTang">27%</span></span>
                    </div>
                    <div class="distribution-item">
                        <span class="color-block style3"></span>
                        <span>宋制 <span id="styleSong">22%</span></span>
                    </div>
                    <div class="distribution-item">
                        <span class="color-block style4"></span>
                        <span>其他 <span id="styleOther">13%</span></span>
                    </div>
                </div>
            </div>

            <div class="panel-card">
                <h3>文化体验店数据趋势</h3>
                <div id="store-line-chart" class="chart"></div> <!-- 新增折线图容器 -->
            </div>
        </aside>

        <section class="map-panel">
            <h3>全国汉服文化活动分布</h3>
            <div id="china-map" class="chart"></div>
        </section>

        <aside class="right-panel">
            <div class="panel-card">
                <h3>热门文化活动TOP10</h3>
                <div id="right-table" class="chart"></div>
            </div>

            <div class="panel-card">
                <h3>参与人群年龄分布</h3>
                <div id="bar-chart" class="chart"></div>
            </div>
        </aside>
    </div>

    <!-- 底部指标 -->
    <footer class="bottom-indicators">
        <div class="indicator-item">
            <span class="icon">📱</span>
            <p>社交媒体话题量</p>
            <p class="big-num" id="socialTopic">12.8 亿</p>
        </div>
        <div class="indicator-item">
            <span class="icon">🎬</span>
            <p>短视频播放量</p>
            <p class="big-num" id="videoPlay">8.6 亿</p>
        </div>
        <div class="indicator-item">
            <span class="icon">📚</span>
            <p>文化讲座场次</p>
            <p class="big-num" id="lectureNum">328</p>
        </div>
        <div class="indicator-item">
            <span class="icon">🤝</span>
            <p>合作文化机构</p>
            <p class="big-num" id="cooperOrg">156 家</p>
        </div>
        <div class="indicator-item">
            <span class="icon">🏫</span>
            <p>进校园活动</p>
            <p class="big-num" id="schoolEvent">215 场</p>
        </div>
    </footer>
</div>
</body>
</html>